<template>
  <div class="preselectionPractice">
    <div class="header">
      <span class="heade_left" @click="goBack"
        ><span class="img"></span> 退出</span
      >
      <!-- <span class="header_content">26个字母练习</span> -->
      <span class="header_content"></span>
      <span class="header_right" v-if="$route.query.type == 21">
        提示：请打开caps lock键
      </span>
      <span class="header_right" v-else-if="$route.query.type == 22">
        提示：请关闭caps lock键
      </span>
      <span class="header_right" v-else>
        提示：请切换caps lock键
      </span>
    </div>
    <p class="tip">规范打字姿势 严格指法训练 养成盲打习惯</p>
    <div class="leter_box">
      <ul class="leter_group">
        <li
          class="leter_item"
          v-for="(item, index) in currentLeterList"
          :key="index"
          :class="{ active: index == currterLeterIndex }"
        >
          {{ item[showLetterType] }}
          <!-- 大写字母 -->
          <!-- <span v-if="$route.query.type == 21">
            {{ item.letterTop }}
          </span> -->
          <!-- 小写字母 -->
          <!-- <span v-else-if="$route.query.type == 22">
            {{ item.letterFooter }}
          </span> -->
        </li>
      </ul>
    </div>
    <div class="keyboard">
      <div class="keyboard_top">
        <div class="quadrangle_group">
          <span v-for="item in 5" :key="item" class="quadrangle"></span>
        </div>
        <div class="quadrangle_radius">
          <span class="quadrangle_radius"></span>
        </div>
      </div>
      <div class="keyboard_center">
        <div class="firstLine">
          <div
            class="firstLine_item"
            v-for="item in firstLine"
            :key="item.code"
            :class="item.letterTop"
          >
            <span>{{ item.letterTop }}</span>
            <span v-if="item.letterFooter">{{ item.letterFooter }}</span>
          </div>
        </div>
        <!-- secondLine,thirdLine,fourthLine,fifthLine类似公用secondLine -->
        <div class="secondLine">
          <div
            class="secondLine_item"
            v-for="item in secondLine"
            :key="item.code"
            :class="[item.letterTop]"
            :ref="item.code"
          >
            <div class="keyboard_active">
              <span>{{ item.letterTop }}</span>
            </div>
          </div>
        </div>
        <div class="secondLine">
          <div
            class="secondLine_item"
            v-for="(item, index) in thirdLine"
            :key="index"
            :class="[{ Caps: item.code == 20 }, item.letterTop]"
            :ref="item.code"
          >
            <div class="keyboard_active">
              <span>{{ item.letterTop }}</span>
            </div>
            <span v-if="item.letterFooter">{{ item.letterFooter }}</span>
          </div>
        </div>
        <div class="secondLine">
          <div
            class="secondLine_item"
            v-for="(item, index) in fourthLine"
            :key="index"
            :class="[item.letterTop]"
            :ref="item.code"
          >
            <span>{{ item.letterTop }}</span>
            <span v-if="item.letterFooter">{{ item.letterFooter }}</span>
          </div>
        </div>
        <div class="secondLine">
          <div
            class="secondLine_item"
            v-for="(item, index) in fifthLine"
            :key="index"
            :class="[{ space: item.code == 32 }, item.letterTop]"
          >
            <span>{{ item.letterTop }}</span>
            <span v-if="item.letterFooter">{{ item.letterFooter }}</span>
          </div>
        </div>
      </div>
      <div class="keyboard_footer">
        <div class="quadrangle_radius"></div>
      </div>
    </div>
    <!-- 练习完成提示 -->
    <div class="mosk" v-if="isShowMosk">
      <div
        class="fail_box"
        :style="{
          background: `url(${picture()})`,
          'background-size': `100% 100%`,
        }"
      >
        <div class="mosk_title">
          恭喜完成
        </div>
        <span class="show_mosk_return" @click="goBack"></span>
        <div class="time">{{ timeStr ? timeStr : "0秒" }}</div>
        <p>
          恭喜你完成26个字母大写练习，让我们继续练习
        </p>
        <p>提升我们的速度和正确率呦~</p>
        <div class="content">
          <span class="icon"></span>
          <div class="content_right">
            <span class="title">学币+{{ fruitCoinNum }}</span>
            <div class="progress">
              <el-progress
                :stroke-width="14"
                :percentage="100"
                color="#E6A23C"
              ></el-progress>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="btn_group">
            <img
              @click="agin"
              class="first pointer"
              src="~@/assets/img/typing_game/show_mosk_continu.png"
              alt=""
            />
            <img
              @click="goBack"
              class="secend pointer"
              src="~@/assets/img/typing_game/show_mosk_back.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addKeyboardChallengeRecord } from "@/api/game.js";
const firstLine = [
  { letterTop: "~", letterFooter: "`", code: 192 },
  { letterTop: "!", letterFooter: "1", code: 49 },
  { letterTop: "@", letterFooter: "2", code: 50 },
  { letterTop: "#", letterFooter: "3", code: 51 },
  { letterTop: "$", letterFooter: "4", code: 52 },
  { letterTop: "%", letterFooter: "5", code: 53 },
  { letterTop: "^", letterFooter: "6", code: 54 },
  { letterTop: "&", letterFooter: "7", code: 55 },
  { letterTop: "*", letterFooter: "8", code: 56 },
  { letterTop: "(", letterFooter: "9", code: 57 },
  { letterTop: ")", letterFooter: "0", code: 48 },
  { letterTop: "_", letterFooter: "-", code: 189 },
  { letterTop: "+", letterFooter: "=", code: 187 },
  { letterTop: "Delete", letterFooter: "", code: 46 },
];
const secondLine = [
  { letterTop: "Tab", letterFooter: "", code: 9 },
  { letterTop: "Q", letterFooter: "", code: 81 },
  { letterTop: "W", letterFooter: "", code: 87 },
  { letterTop: "E", letterFooter: "", code: 69 },
  { letterTop: "R", letterFooter: "", code: 82 },
  { letterTop: "T", letterFooter: "", code: 84 },
  { letterTop: "Y", letterFooter: "", code: 89 },
  { letterTop: "U", letterFooter: "", code: 85 },
  { letterTop: "I", letterFooter: "", code: 73 },
  { letterTop: "O", letterFooter: "", code: 79 },
  { letterTop: "P", letterFooter: "", code: 80 },
  { letterTop: "[", letterFooter: "", code: 219 },
  { letterTop: "]", letterFooter: "", code: 221 },
  { letterTop: "\\", letterFooter: "", code: 220 },
];
const thirdLine = [
  { letterTop: "Caps Lock", letterFooter: "", code: 20 },
  { letterTop: "A", letterFooter: "", code: 65 },
  { letterTop: "S", letterFooter: "", code: 83 },
  { letterTop: "D", letterFooter: "", code: 68 },
  { letterTop: "F", letterFooter: "", code: 70 },
  { letterTop: "G", letterFooter: "", code: 71 },
  { letterTop: "H", letterFooter: "", code: 72 },
  { letterTop: "J", letterFooter: "", code: 74 },
  { letterTop: "K", letterFooter: "", code: 75 },
  { letterTop: "L", letterFooter: "", code: 76 },
  { letterTop: ":", letterFooter: ";", code: 186 },
  { letterTop: '"', letterFooter: "'", code: 222 },
  { letterTop: "Enter", letterFooter: "", code: 13 },
];
const fourthLine = [
  { letterTop: "Shift", letterFooter: "", code: 16 },
  { letterTop: "Z", letterFooter: "", code: 90 },
  { letterTop: "X", letterFooter: "", code: 88 },
  { letterTop: "C", letterFooter: "", code: 67 },
  { letterTop: "V", letterFooter: "", code: 86 },
  { letterTop: "B", letterFooter: "", code: 66 },
  { letterTop: "N", letterFooter: "", code: 78 },
  { letterTop: "M", letterFooter: "", code: 77 },
  { letterTop: "<", letterFooter: ",", code: 188 },
  { letterTop: ">", letterFooter: ".", code: 190 },
  { letterTop: "?", letterFooter: "/", code: 191 },
  { letterTop: "Shift", letterFooter: "", code: 16 },
];
const fifthLine = [
  { letterTop: "Fn", letterFooter: "", code: "" },
  { letterTop: "Ctrl", letterFooter: "", code: 17 },
  { letterTop: "Alt", letterFooter: "", code: 18 },
  { letterTop: " ", letterFooter: " ", code: 32 },
  { letterTop: "Ctrl", letterFooter: "", code: 17 },
  { letterTop: "Alt", letterFooter: "", code: 18 },
  { letterTop: "◀", letterFooter: "", code: 37 },
  { letterTop: "▲", letterFooter: "▼", code: 38 },
  { letterTop: "▶", letterFooter: "", code: 39 },
];
let alphabetCodes = [];
for (let i = 65; i <= 90; i++) {
  const letter = String.fromCharCode(i);
  alphabetCodes.push({
    letterTop: letter,
    letterFooter: letter.toLowerCase(),
    code: i,
    otherLeter: "",
  });
}
export default {
  data() {
    return {
      firstLine: [...firstLine],
      secondLine: [...secondLine],
      thirdLine: [...thirdLine],
      fourthLine: [...fourthLine],
      fifthLine: [...fifthLine],
      currentLeterList: [],
      currentLeterAllList: [],
      currterLeterIndex: 0,
      currterLeterCode: null,
      isSubmit: false,
      time: Date.now(),
      timeStr: "",
      isShowMosk: false,
      fruitCoinNum: 0,
      showLetterType: "",
      randomFlag: false,
      finallyFlag: false,
    };
  },
  methods: {
    async addKeyboardChallengeRecord(data) {
      const res = await addKeyboardChallengeRecord(data);
      if (res.code == 200) {
        this.fruitCoinNum = res.data.integral;
      } else {
        this.fruitCoinNum = 0;
      }
    },
    agin() {
      Object.assign(this.$data, this.$options.data());
      this.initData();
    },
    goBack() {
      this.$router.back(-1);
    },
    picture() {
      return require("../../../../assets/img/typing_game/show_mosk_bg.png");
    },
    // 处理时间
    timeFilter(value) {
      let time = Math.floor(Number(value));
      if (time < 60) {
        return time + "秒";
      } else if (time < 3600) {
        return Math.floor(time / 60) + "分" + (time % 60) + "秒"; // 12time/60
      } else {
        return (
          Math.floor(time / 60 / 60) +
          "时" +
          Math.floor(time / 60) +
          "分" +
          (time % (60 * 60)) +
          "秒"
        );
      }
    },
    // 打乱数组
    randomSortArray(arr) {
      let len = arr.length;
      for (let i = len - 1; i >= 0; i--) {
        let randomIndex = Math.floor(Math.random() * (i + 1));
        let temp = arr[randomIndex];
        arr[randomIndex] = arr[i];
        arr[i] = temp;
      }
      return arr;
    },
    chageCode() {
      this.currterLeterCode = this.currentLeterList[
        this.currterLeterIndex
      ].code;
    },
    // 初始化数据
    initData() {
      this.currentLeterAllList = [...alphabetCodes];
      if (this.$route.query.type == 21) {
        // 大写字母
        this.showLetterType = "letterTop";
      } else if (this.$route.query.type == 22) {
        // 小写字母
        this.showLetterType = "letterFooter";
      } else if (this.$route.query.type == 23) {
        let arr = ["letterTop", "letterFooter"];
        this.currentLeterAllList.map((item) => {
          item.otherLeter = item[arr[parseInt(Math.random() * 2)]];
          return item;
        });
        this.currentLeterAllList = this.randomSortArray(
          this.currentLeterAllList
        );
        this.showLetterType = "otherLeter";
      }
      this.currentLeterList = this.currentLeterAllList.slice(0, 14);
    },
    keyDown(key) {
      if (
        this.currentLeterList[this.currterLeterIndex][this.showLetterType] ==
        key
      ) {
        if (this.currterLeterIndex == this.currentLeterList.length - 1) {
          if (this.isSubmit) {
            let time = ((Date.now() - this.time) / 1000).toFixed(2);
            this.timeStr = this.timeFilter(time);
            this.addKeyboardChallengeRecord({
              type: this.$route.query.type,
              challengeTime: time,
            });
            this.isShowMosk = true;
            return;
          }
          if (this.$route.query.type == 23) {
            this.isSubmit = true;
            this.currentLeterList = this.currentLeterAllList.slice(14);
            this.currterLeterIndex = 0;
            this.chageCode();
          } else {
            if (!this.randomFlag) {
              this.currentLeterList = this.currentLeterAllList.slice(14);
              this.currterLeterIndex = 0;
              this.chageCode();
              this.randomFlag = true;
            } else {
              if (this.finallyFlag == false) {
                this.currentLeterAllList = this.randomSortArray(
                  this.currentLeterAllList
                );
                this.currterLeterIndex = 0;
                this.currentLeterList = this.currentLeterAllList.slice(0, 14);
                this.chageCode();
                this.finallyFlag = true;
              }else if (this.finallyFlag == true) {
                this.isSubmit = true;
                this.currentLeterList = this.currentLeterAllList.slice(14);
                this.currterLeterIndex = 0;
                this.chageCode();
              }
            }
          }
        } else {
          this.currterLeterIndex += 1;
          this.chageCode();
        }
      }
    },
  },
  created() {
    this.initData();
  },
  async mounted() {
    await this.$nextTick();
    const that = this;
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (
        that.currentLeterAllList.filter((item) => item.code == key).length == 1
      ) {
        const defaultKey = key;
        that.$refs[defaultKey][0].classList.add("keyboard_active_box");
        setTimeout(() => {
          that.$refs[defaultKey][0].classList.remove("keyboard_active_box");
        }, 300);
        that.keyDown(e.key);
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.preselectionPractice {
  font-family: Source Han Sans CN;
  padding: 60px 110px 0;
  background-color: #088a83;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .heade_left {
      cursor: pointer;
      width: 200px;
      font-size: 20px;
      color: #ffff;
      display: flex;
      align-items: center;
      .img {
        width: 30px;
        height: 30px;
        display: block;
        background: url("~@/assets/img/typing_game/return.png");
        background-size: 100% 100%;
        margin-right: 5px;
      }
    }
    .header_content {
      height: 44px;
      width: 249px;
      background: url("~@/assets/img/typing_game/content_txt.png");
      background-size: 100% 100%;
      //   letter-spacing: 4px;
      //   font-size: 34px;
      //   font-weight: 700;
      //   color: #006560;
      //   -webkit-text-stroke: 0.5px #ffffff;
      //   text-stroke: 0.5px #ffff;
      // text-shadow: 1px 1px 0 #ffff, -1px -1px 0 #ffff, -1px 1px 0 #ffff, 1px -1px 0 #ffff, 0px 2px 0px #ffff;
    }
    .header_right {
      width: 200px;
      text-align: right;
      font-size: 16px;
      color: #ffffff;
    }
  }
  .tip {
    font-size: 18px;
    letter-spacing: 2px;
    padding-top: 20px;
    color: #ffffff;
    text-align: center;
  }
  .leter_box {
    font-family: Verdana, sans-serif;
    display: flex;
    justify-content: center;
    .leter_group {
      min-width: 1029px;
      max-width: 1029px;
      margin-top: 60px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .leter_item {
        margin: 20px 20px;
        color: #088a83;
        text-align: center;
        line-height: 80px;
        width: 107px;
        height: 80px;
        font-size: 30px;
        font-weight: 700;
        background: #ffffff;
        box-shadow: inset 0px -6px 4px 0px rgba(23, 170, 166, 0.57);
        border-radius: 10px;
      }
      .active {
        background: #6ff7f3;
        color: #0e645f;
      }
    }
  }
  .keyboard {
    // width: 990px;
    width: 1100px;
    height: 400px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #84f5f2;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 0 0 5px 1px #999;
    .keyboard_top {
      display: flex;
      justify-content: space-between;
      .quadrangle_group {
        margin-left: 131px;
        margin-top: 20px;
        .quadrangle {
          border: 1px solid black;
          margin-right: 10px;
          display: inline-block;
          width: 10px;
          height: 20px;
          text-align: center;
          border-radius: 4px;
          background-color: #088a83;
          transform: skewX(-20deg);
        }
      }
      .quadrangle_radius {
        .quadrangle_radius {
          border: 2px solid black;
          border-top: none;
          display: inline-block;
          margin-right: 131px;
          width: 200px;
          height: 25px;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          background-color: #1eb8b0;
        }
      }
    }
    .keyboard_active_box {
      transition: background-color 0.3s;
      background-color: #088a83 !important;
      .keyboard_active {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        align-items: center;
        background-color: rgba($color: #ffff, $alpha: 0.2);
        color: #ebe3e3;
      }
    }
    .keyboard_center {
      margin: 10px 40px;
      .firstLine {
        display: flex;
        justify-content: space-between;
        .firstLine_item {
          font-weight: 700;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 40px;
          background: #ffffff;
          border-radius: 10px;
          border: 1px solid #040404;
        }
        .Delete {
          width: 90px;
          font-size: 20px;
          line-height: 40px;
          text-align: center;
          font-weight: 400;
        }
      }
      .secondLine {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .secondLine_item {
          transition: background-color 0.3s;
          background-color: #ffff;
          font-weight: 700;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 50px;
          border-radius: 10px;
          border: 1px solid #040404;
        }
        .Tab {
          width: 90px;
          font-size: 20px;
          line-height: 40px;
          text-align: center;
          font-weight: 400;
        }
        .Enter {
          width: 100px;
        }
        .Caps {
          width: 100px;
        }
        .Shift {
          width: 130px;
        }
        .Ctrl {
          width: 80px;
        }
        .space {
          width: 400px;
        }
      }
    }
    .keyboard_footer {
      position: absolute;
      bottom: 0;
      left: 80px;
      .quadrangle_radius {
        border: 2px solid black;
        border-bottom: none;
        margin-right: 131px;
        width: 200px;
        height: 20px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: #1eb8b0;
      }
    }
  }
  .mosk {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.48);
    z-index: 99;
    .fail_box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 725px;
      height: 500px;
      .mosk_title {
        padding-top: 12px;
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        color: #ffffff;
        -webkit-text-stroke: 2px #006c66;
        text-stroke: 0.5px #006c66;
        // -webkit-text-stroke: 3px #006c66;
        // text-stroke: 3px #006c66;
      }
      .show_mosk_return {
        position: absolute;
        right: 15px;
        top: 21px;
        width: 70px;
        height: 73px;
        background: url("~@/assets/img/typing_game/show_mosk_return.png");
        background-size: 100% 100%;
      }
      .time {
        padding-top: 40px;
        padding-bottom: 14px;
        text-align: center;
        font-size: 32px;
        // font-weight: bold;
        color: #de7250;
      }
      p {
        text-align: center;
        // font-weight: bold;
        color: #8a7a54;
        font-size: 24px;
        line-height: 34px;
      }
      .content {
        height: 80px;
        margin: 20px auto 0;
        width: 520px;
        display: flex;
        align-items: center;
        // justify-content: center;
        background: #f8ebcd;
        border-radius: 5px;
        .icon {
          display: inline-block;
          width: 60px;
          height: 60px;
          background: url("~@/assets/img/typing_game/icon.png");
          background-size: 100% 100%;
          margin-right: 20px;
          margin-left: 20px;
        }
        .content_right {
          display: flex;
          height: 70%;
          flex-direction: column;
          justify-content: space-evenly;
        }
        .title {
          font-size: 20px;
          font-weight: bold;
          color: #b55432;
          line-height: 26px;
        }
        /deep/ .el-progress__text {
          font-size: 12px !important;
        }
        /deep/ .el-progress-bar__inner {
          height: 100%;
        }
        .progress {
          box-sizing: border-box;
          // border: 1px solid #eca927;
          width: 320px;
        }
      }
      .footer {
        display: flex;
        justify-content: center;
        padding-top: 15px;
        .btn_group {
          display: flex;
          justify-content: space-around;
          width: 420px;
          img {
            width: 175px;
            height: 80px;
          }
        }
      }
    }
  }
}
</style>
